<template>
  <!-- v-container用于创建视点在中心的页面，而fluid属性可将其宽度拓展到充满容器 -->
  <v-app>
    <div class="login-container" @keyup.enter="onLogin">
      <div class="panel-wrapper">
        <v-layout pb-5>
          <v-flex class="headline">
            {{ $t('login.headerTitle') }}
          </v-flex>
        </v-layout>
        <v-layout column justify-center class="panel px-4">
          <v-flex md9>
              <v-layout row wrap>
                <v-flex md12>
                  <v-text-field
                    outline
                    color="secondary"
                    prepend-inner-icon="account_circle"
                    :label="$t('login.account')"
                    v-model="username"
                    type="text"
                    name="username"
                    hide-details
                  ></v-text-field>
                </v-flex>
                <v-flex md12 mt-3>
                  <v-text-field
                    outline
                    color="secondary"
                    prepend-inner-icon="lock"
                    :label="$t('login.password')"
                    v-model="password"
                    type="password"
                    name="password"
                    hide-details
                  ></v-text-field>
                </v-flex>
                <v-flex md12 text-xs-center mt-3>
                  <v-btn @click="onLogin" round dark color="secondary" class="login-button">
                    <span class="title">{{ $t('login.login') }}</span>
                  </v-btn>
                </v-flex>

                <v-flex md12 text-xs-right>
                  <span>{{ $t('login.forgetPassword') }}</span>
                </v-flex>
                <v-flex md12 text-xs-center>
                  <span>{{ $t('login.noAccount') }}</span>
                  <router-link to="register" tag="span" class="blue--text">{{ $t('login.register') }}</router-link>
                </v-flex>

              </v-layout>
          </v-flex>
        </v-layout>
      </div>
    </div>

    <v-footer color="secondary" app>
      <div class="white--text pl-4">&copy; {{new Date().getFullYear()}}</div>
    </v-footer>
  </v-app>
</template>

<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import Cookie from 'js-cookie';
import { Login } from "@/api";
declare const $Vue: Vue;

@Component
export default class LoginClass extends Vue {
  private username: string = '';
  private password: string = '';
  private account: string  = '';

  protected mounted() {
    // this.testData()
  }

    private testData() {
    this.username = '1234'
    this.password = '123456'
  }

  private async onLogin() {
    if (this.username === "") {
      return $Vue.$emit("snackbar", {
        message: "请填写账号"
      });
    }
    if (this.password === "") {
      return $Vue.$emit("snackbar", {
        message: "请填写密码"
      });
    }
    const params = {
      username: this.username,
      password: this.password,
      userType: 2,
    };

    const { data } = await Login.handleLogin.r(params);
    // 存储sessionId
    if (data.result === 0) {
      console.log('login', data);
      Cookie.set('seller_userId', data.data.userVo.userId.toString());
      let userInfo = data.data;
      Cookie.set('seller_token', userInfo.userVo.token);
      this.$emit('login', {
        newPath: 'Home/ReleaseTask',
        data,
      });
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
    
  }
}
</script>


<style lang="less">
.login-container {
  background-size: 100% 100%!important;
  background-position-y: 80%!important;
  background-repeat: no-repeat!important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-image: url(../../assets/background.png)!important;
  .panel-wrapper {
    // flex-basis: 26%;
    width: 24rem;
  }
  .panel {
    width: 100%;
    height: 20rem;
    border-radius: 2rem;
    background-color: #ffffff88;
    .login-title {
      line-height: 2rem;
    }
  }

  .login-button {
    width: 12rem;
    height: 3rem;
  }
}
</style>

